<html data-dpr="1" style="font-size: 37.5385px;">
<head>
    <meta charset="utf-8">
    <title>购物车</title>

    <meta name="_token" content="{{csrf_token()}}">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no,email=no">
    <link rel="shortcut icon" type="image/x-icon" href="//mall.res.meizu.com/index/img/favicon.ico">
    <link rel="stylesheet" href="//mall.res.meizu.com/cart/css/cart-cdf58e09fa.css">
    <script src="/layui/layui.js"></script>
    <script>
        layui.use('jquery',function () {
            var $ = layui.jquery;
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            });
        })

    </script>
</head>
<body>

<div id="app-cart" class="app cart">
    <header id="header" class="header">
        <div class="title">购物车</div>
        <div class="goback"><a href="javascript:history.back();" data-mtype="mall_cart_yt_back"> <i
                        class="iconfont ico-back"></i> </a></div>
        <div class="qtool"><a class="btn-modify" data-mtype="mall_cart_yt_edit">编辑</a></div>
    </header>
    <div class="cart-list">
        @foreach($goodscars as $goodscar)
        <div class="section radio-group merchant-group">
            <div class="supplier radio-row">
                <div class="radio radio-merchant "></div>
                <div class="radio-fld name">{{$goodscar->goods->cate->name}}</div>
            </div>
            <div class="secrow radio-row" data-id="779601" data-skuid="5104:0">
                <div class="radio radio-item radio-pay radio-modify checked" goods_carid = {{$goodscar->id}}></div>
                <div class="radio-fld">
                    <div class="item">
                        <div class="prod-img">
                            <a href="/goods/{{$goodscar->goods->id}}" data-mtype="mall_cart_prod">
                                <img src="{{$goodscar->goods->img}}">
                            </a>
                        </div>
                        <div class="intro">
                            <a href="/goods/{{$goodscar->goods->id}}" data-mtype="mall_cart_prod">
                                <h3>{{$goodscar->goods->name}}</h3>
                                <p class="attrs">
                                    {{$goodscar->sku_value}}
                                </p>
                            </a>
                            <div class="howmuch">
                                <div class="price xuanding" data-symbol="￥">
                                    {{$goodscar->goodsSku->price}}
                                </div>
                                <div class="quantity">
                                    <span>
                                        ×
                                        <em class="j-num">{{$goodscar->num}}</em>
                                    </span>
                                </div>
                                <div class="amount-ctrl">
                                    <button class="ctrl minus j-minus check_num" >-</button>
                                    <span id="prod-amount" class="amount j-amount" data-value="{{$goodscar->num}}"
                                          data-max="100">{{$goodscar->num}}</span>
                                    <button class="ctrl plus j-plus check_num">+</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
            @endforeach
    </div>
    <div id="fixed-btm" class="fixed-btm">
        <form id="submit-cart-form" method="post">
            <div class="cart-bar radio-group">
                <div class="radio-row">
                    <div class="radio check-all" data-radio="all" data-mtype="mall_cart_all">全选</div>
                    <div class="radio-fld">
                        <div class="total-pay"><label>总计:</label> <span id="total-paymoney" class="total-paymoney"
                                                                        data-symbol="￥"></span></div>
                        <input type="hidden" name="cart_param"> <input type="hidden" name="buy_from" value="cart">
                        <button id="cart-done" type="button" class="btn btn-hi btn-done"
                                data-mtype="mall_cart_checkout">结算
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="/js/zepto.js"></script>
<script>
    layui.use(['jquery','layer'],function () {
        var $ = layui.jquery;
        var layer = layui.layer;

        $(total());
        $('.btn-modify').click(function () {
            if($('.btn-modify').text()=="编辑"){
                $('.amount-ctrl').css('display','block');
                $('.btn-modify').text('完成');
                $('.quantity').css('display','none');
            }else if($('.btn-modify').text()=="完成"){
                $('.amount-ctrl').css('display','none');
                $('.btn-modify').text('编辑');
                $('.quantity').css('display','block');

                goodsCar_id = [];
                num = [];
                $('.checked').each(function () {
                    goodsCar_id.push($(this).attr('goods_carid'));
                    num.push($(this).next().find('.item').find('.intro').find('.howmuch').find('.amount-ctrl').find('.j-amount').text())
                })
                console.log(goodsCar_id);
                console.log(num);
                $.ajax({
                    url:'/updateGoodsCar',
                    type:'post',
                    dateType: 'json',
                    data:{goodsCar_id:goodsCar_id,num:num},
                    success:function () {

                    },
                    error:function () {

                    }
                })
            }

        })

        $('.check_num').click(function () {
            tag = $(this).text();
            that = $(this);
            num = that.siblings('span').text();
            if (tag == '+'){
                num++;
                that.siblings('span').text(num);

            }else if(tag == '-' && num>1){
                num--;
                that.siblings('span').text(num);
            }
            $(this).parent().prev().find('span').find('.j-num').text(num);
            total();
        })

        $('.radio-pay').click(function () {
            if ($(this).hasClass('checked')) {
                $(this).next().find('.item').find('.intro').find('.howmuch').find('.price').removeClass('price');
                $(this).removeClass('checked');
                total();
            }else {
                $(this).next().find('.item').find('.intro').find('.howmuch').find('.xuanding').addClass('price');
                $(this).addClass('checked');
                total();
            }

        })

        $('#cart-done').click(function () {
          goodsCar_id = [];
          totalMoney = $('#total-paymoney').text();
          $('.checked').each(function () {
              goodsCar_id.push($(this).attr('goods_carid'));
          })
          $.ajax({
            url:'/jiesuan',
            type:'post',
            data:{goodsCar_id:goodsCar_id,totalMoney:totalMoney},
            dataType:'json',
            success:function (msg) {
                if (msg.error == 0) {
                  layer.alert(msg.info, {icon: 6},function () {

                  });
                }
            },
            error:function (msg) {
              layer.msg(msg.info, function () {

              });
            }
          })
        })


        function total() {
            var allPrice = 0;
            $('.price').each(function () {
                allPrice += $(this).text()*$(this).next().find('span').find('.j-num').text();
            })
            $('#total-paymoney').text(allPrice);
        }
    })
</script>
</body>
</html>
